<template>
  <div class="pup">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <span slot="left">取消</span>
      <span slot="right">完成</span>
      <span slot="title" class="strong">修改昵称</span>
    </van-nav-bar>
    <van-field v-model="value1" class="file">
      <van-icon slot="right-icon" @click="onClickfiel" name="close" />
    </van-field>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      value1: this.value
    }
  },
  created () {},
  mounted () {},
  methods: {
    onClickLeft () {
      this.$emit('close')
    },
    onClickRight () {
      const locaname = this.value1

      if (!locaname.length) {
        this.$toast('昵称不能为空！')
        return
      }
      this.$emit('input', locaname)
      this.$emit('close')
    },
    onClickfiel () {
      this.value1 = null
    }
  }
}
</script>

<style scoped lang="less">
.pup {
  background: rgb(248, 248, 248);
  height: 1820px;
  .strong {
    font-weight: 700;
  }
  .file {
    margin-top: 18px;
    margin-bottom: 18px;
  }
}
</style>
